<template>
  <!--  博客头部-->
  <view class="update_blog_head">
    <view class="left">
      <view @click="toBackBlog">
        <el-icon>
          <arrow-left />
        </el-icon>
        <view class="blogManage">返回上页</view>
      </view>
    </view>
    <view class="center">
      <input type="text" v-model="blogTitle" placeholder="请输入标题" />
    </view>
    <view class="right">
      <view class="draft" @click="buttonDrafts">保存草稿</view>
      <view class="enter" @click="buttonArticle">发表文章</view>
      <view class="photo">
        <img :src="headImgSrc ? '/file/' + headImgSrc:''" alt="">
      </view>
    </view>
  </view>
  <!--  博客内容-->
  <view class="update_blog_body">
    <!--    博客编辑-->
    <view class="update_blog_edit">
      <!-- 工具栏 -->
      <Toolbar
        :editorId="editorId"
        :mode="mode"
        style="border-bottom: 1px solid #ccc"
      />
      <!-- 编辑器 -->
      <Editor
        v-if="isEditorShow"
        :editorId="editorId"
        :mode="mode"
        :defaultConfig="editorConfig"
        :defaultContent="getDefaultContent"
        @customPaste="customPaste"
        style="height: 500px"
      />
    </view>
    <!--    博客预览-->
    <view class="update_blog_show"></view>
  </view>
  <!--  发表博客弹出框-->
  <el-dialog
    v-model="showArticle"
    :title="title"
    :close-on-click-modal="false"
  >
    <view class="messageBoxHint">请勿发布涉及政治、广告、营销、翻墙、违反国家法律法规等内容</view>
    <view class="messageBoxHintButton">
      <el-form ref="form" label-width="120px">
        <!--博客封面-->
        <el-form-item label="博客封面" class="blogCover">
          <el-upload
            action="#"
            list-type="picture-card"
            :on-preview="showBigCover"
            :auto-upload="false"
            :on-change='ChangeCover'
            :limit="1"
            v-show="showFrameVisible"
            :file-list='coverImgList'
          >
            <el-icon>
              <plus />
            </el-icon>
          </el-upload>
          <view class="showCoverImage" v-show="showCoverVisible">
            <img class="coverImg" :src="blogCover? '/file/' + blogCover:''" alt="">
            <view class="shadeImage">
              <view class="shadeImageTop"/>
              <view class="shadeImageBottom">
                <span class="shadeImageIcon">
                  <span
                    @click="showBigCover()"
                  >
                    <el-icon color="#fff" class="icon_zoom">
                      <zoom-in/>
                    </el-icon>
                  </span>
                  <span
                    @click="removeCoverImg()"
                  >
                    <el-icon color="#fff">
                      <delete />
                    </el-icon>
                  </span>
                </span>
              </view>
            </view>
          </view>
          <!--博客封面-->
          <el-dialog class="blogCoverBig" v-model="blogCoverBigVisible">
            <img class="blogCoverBigImg" :src="'/file/'+blogCoverBig" alt="">
          </el-dialog>
        </el-form-item>
        <!--备注-->
        <el-form-item label="博客备注">
          <el-input v-model="blogRemark"></el-input>
        </el-form-item>
      </el-form>
      <view class="messageDraft" @click="messageCancel">取消</view>
      <view class="messageDraft" @click="headleSaveDrafts">确认</view>
    </view>
  </el-dialog>
</template>

<script>
import './index.less'
import indexT from './indexT'

export default indexT
</script>

